<template>
  <div class="app-container component_name">
    <el-form ref="form" :model="form" :rules="rules" >
        <el-form-item label="" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户名"  />
        </el-form-item>
        <el-form-item label="" prop="newPassword">
            <el-input v-model="form.newPassword" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item label="" prop="confirmPassword">
            <el-input v-model="form.confirmPassword" placeholder="请确认密码" type="password" />
        </el-form-item>
        <el-form-item label="" prop="imgCode">
            <div class="imgCode ">
              <el-input v-model="form.imgCode" placeholder="验证码" @keyup.enter.native="submitForm('ruleForm')" ></el-input>
              <img  class="imgBox" @click="img_codeClick" ref="img_codeRef"  :src="$upLoadApi + '/register/img_code'" alt="">
            </div>
        </el-form-item>
        <el-form-item>
            <div class="" style="text-align:center">
                <el-button type="primary"  @click="submit">立即注册</el-button>
                <!-- <el-button type="primary"  @click="submits">登录</el-button> -->
            </div>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { postRegister } from '../../api/common'
import { postUpdateUser } from '../../api/modules/system'
export default {
  name: 'component_name',
  data () {
    const equalToPassword = (rule, value, callback) => {
      if (this.form.newPassword !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        imgCode: undefined,
        userName: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        imgCode: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted () {
    this.img_codeClick()
  },
  methods: {
    // 点击图片 获取图片验证码
    img_codeClick () {
      this.$refs.img_codeRef.src = this.$upLoadApi + '/register/img_code?time' + new Date()
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          postRegister({
            role: 'visitors',
            nickName: '到此一游',
            phoneNumber: '18866666666',
            email: '*****@email.com',
            imgCode: this.form.imgCode,
            userName: this.form.userName,
            password: this.form.newPassword
          }).then(res => {
            // 注册成功立即登录
            this.msgSuccess('注册成功，请完成登录！')
            this.$emit('changeWay', 'login')
          }, res => {
            this.img_codeClick()
          })
        }
      })
    },
    submits () {
      postUpdateUser({ userName: 'boss', id: '60dd8104cbf0732dd46afc10', password: 'bossLhz', nickName: '总管理' })
    }
  }
}
</script>

<style  lang="scss" scoped>
.imgCode{
    display: flex;
    align-items: center;
    .imgBox{
      margin-left: 10px;
      width:90px;
      height:40px
    }
  }
</style>
